<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <title>名片夹</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>

    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
        <button type="button" class="btn btn-outline btn-default" id="addContact">
            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
        </button>
    </div>
    <div class="row">
        <div class="col-sm-4" th:each="namecard : ${nameCards}">
            <div class="contact-box" >
                <a href="#" onclick="modify(this)">
                    <!--<div class="col-sm-4">-->
                        <!--<div class="text-center">-->
                            <!--<img alt="image" class="img-circle m-t-xs img-responsive" src="../../static/img/a2.jpg"/>-->
                            <!--<div class="m-t-xs font-bold">员工</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="col-sm-8">
                        <h3><strong th:text="${namecard.cardUserName}"></strong></h3>
                        <p th:text="${namecard.cardUserDept}"></p>
                        <address>
                            E-mail:<span th:text="${namecard.cardUserEmail}"></span><br/>
                            <abbr title="Phone">Tel:</abbr> <span th:text="${namecard.cardUserPhone}"></span>
                        </address>
                    </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="modifyId" th:value="${namecard.nameCardId}"/>
                </a>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>


<script>
    $(document).ready(function () {
        $('.contact-box').each(function () {
            animationHover(this, 'pulse');
        });
        $('#addContact').click(function (event) {
            layer.open({
                type: 2,
                title: '新增名片夹',
                shadeClose: true,
                shade: false,
                area: ['500px', '60%'],
                content: '/namecard/toNameCardAdd' //iframe的url
            });
        });
    });
    function modify(aObject){
        var cardId  = aObject.children[2].value;
        layer.open({
            type: 2,
            title: '修改名片夹',
            shadeClose: true,
            shade: false,
            area: ['500px', '60%'],
            content: '/namecard/toNameCardModify/' + cardId //iframe的url
        });
    }
</script>

<!--<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>-->
<!--&lt;!&ndash;统计代码，可删除&ndash;&gt;-->

</body>

</html>
